import { Skeleton, Stack, XStack } from '@onekeyhq/components';

import { ListItem } from '../ListItem';

function ListLoading({
  isTokenSelectorView,
}: {
  isTokenSelectorView?: boolean;
}) {
  if (!isTokenSelectorView) {
    return (
      <Stack py="$3">
        {/* Header */}
        <XStack
          gap="$3"
          py="$2"
          px="$5"
          $md={{
            display: 'none',
          }}
        >
          <XStack
            flexGrow={1}
            flexBasis={0}
            gap={89}
            spaceDirection="horizontal"
          >
            <Stack flexGrow={1} flexBasis={0} py="$1">
              <Skeleton h="$3" w="$12" />
            </Stack>
            <Stack flexGrow={1} flexBasis={0} py="$1">
              <Skeleton h="$3" w="$12" />
            </Stack>
          </XStack>
          <Stack w="$8" />
          <XStack flexGrow={1} flexBasis={0}>
            <Stack flexGrow={1} flexBasis={0} py="$1">
              <Skeleton h="$3" w="$12" />
            </Stack>
            <Stack flexGrow={1} flexBasis={0} py="$1" alignItems="flex-end">
              <Skeleton h="$3" w="$12" />
            </Stack>
          </XStack>
        </XStack>

        {/* Items */}
        {[...Array(5)].map((_, index) => (
          <ListItem key={index}>
            <Stack>
              <Skeleton
                radius="round"
                w="$10"
                h="$10"
                $gtLg={{
                  w: '$8',
                  h: '$8',
                }}
              />
            </Stack>
            <Stack
              flexGrow={1}
              flexBasis={0}
              $gtLg={{
                flexDirection: 'row',
              }}
            >
              <Stack
                py="$1"
                $gtLg={{
                  flexGrow: 1,
                  flexBasis: 0,
                }}
              >
                <Skeleton
                  h="$4"
                  $gtLg={{
                    h: '$3',
                  }}
                  w="$32"
                />
              </Stack>
              <Stack
                py="$1"
                $gtLg={{
                  flexGrow: 1,
                  flexBasis: 0,
                }}
              >
                <Skeleton h="$3" w="$24" />
              </Stack>
            </Stack>
            <Stack
              flexGrow={1}
              flexBasis={0}
              $gtLg={{
                flexDirection: 'row',
              }}
            >
              <Stack
                alignItems="flex-end"
                py="$1"
                $gtLg={{
                  alignItems: 'flex-start',
                  flexGrow: 1,
                  flexBasis: 0,
                }}
              >
                <Skeleton
                  h="$4"
                  $gtLg={{
                    h: '$3',
                  }}
                  w="$16"
                />
              </Stack>
              <Stack
                alignItems="flex-end"
                py="$1"
                $gtLg={{
                  flexGrow: 1,
                  flexBasis: 0,
                }}
              >
                <Skeleton h="$3" w="$12" />
              </Stack>
            </Stack>
          </ListItem>
        ))}
      </Stack>
    );
  }

  return (
    <Stack py="$3">
      {[...Array(3)].map((_, index) => (
        <ListItem key={index}>
          <Stack>
            <Skeleton radius="round" w="$10" h="$10" />
          </Stack>
          <Stack>
            <Stack py="$1">
              <Skeleton
                h="$4"
                $gtLg={{
                  h: '$3',
                }}
                w="$32"
              />
            </Stack>
            <Stack py="$1">
              <Skeleton h="$3" w="$24" />
            </Stack>
          </Stack>
        </ListItem>
      ))}
    </Stack>
  );
}

function NFTListLoadingView() {
  return (
    <XStack p="$2.5" flexWrap="wrap">
      {[...Array(6)].map((_, index) => (
        <Stack
          key={index}
          flexBasis="50%"
          $gtSm={{
            flexBasis: '33.333333%',
          }}
          $gtLg={{
            flexBasis: '25%',
          }}
          $gtXl={{
            flexBasis: '16.666666%',
          }}
          $gt2xl={{
            flexBasis: '14.2857142857%',
          }}
          p="$2.5"
          borderRadius="$4"
        >
          <Stack pb="100%">
            <Stack position="absolute" left={0} top={0} right={0} bottom={0}>
              <Skeleton w="100%" h="100%" borderRadius="$2.5" />
            </Stack>
          </Stack>
          <Stack mt="$2">
            <Stack py="$1">
              <Skeleton h="$4" w="$16" />
            </Stack>
            <Stack py="$1">
              <Skeleton h="$3" w="$12" />
            </Stack>
          </Stack>
        </Stack>
      ))}
    </XStack>
  );
}

function HistoryLoadingView({ tableLayout }: { tableLayout?: boolean }) {
  return (
    <Stack py="$3">
      {[...Array(5)].map((_, index) => (
        <ListItem key={index}>
          <XStack flexGrow={1} flexBasis={0} gap="$3">
            <Stack>
              <Skeleton radius="round" w="$10" h="$10" />
            </Stack>
            <Stack>
              <Stack py="$1">
                <Skeleton h={tableLayout ? '$3' : '$4'} w="$32" />
              </Stack>
              <Stack py="$1">
                <Skeleton h="$3" w="$24" />
              </Stack>
            </Stack>
          </XStack>
          <Stack flexGrow={1} flexBasis={0}>
            <Stack alignItems={tableLayout ? 'unset' : 'flex-end'} py="$1">
              <Skeleton h={tableLayout ? '$3' : '$4'} w="$16" />
            </Stack>
            <Stack alignItems={tableLayout ? 'unset' : 'flex-end'} py="$1">
              <Skeleton h="$3" w="$12" />
            </Stack>
          </Stack>
          {tableLayout ? (
            <Stack flexGrow={1} flexBasis={0}>
              <Stack alignItems={tableLayout ? 'unset' : 'flex-end'} py="$1">
                <Skeleton h={tableLayout ? '$3' : '$4'} w="$16" />
              </Stack>
              <Stack alignItems={tableLayout ? 'unset' : 'flex-end'} py="$1">
                <Skeleton h="$3" w="$12" />
              </Stack>
            </Stack>
          ) : null}
        </ListItem>
      ))}
    </Stack>
  );
}

export { ListLoading, NFTListLoadingView, HistoryLoadingView };
